<template>
  <aside class="profile-sidebar">
    <!-- 用户成就 -->
    <div class="achievements">
      <h3>个人成就</h3>
      <div class="badges" v-if="isCurrentUser">
        <textarea
          v-model="editData.achievements"
          placeholder="输入您的成就..."
          class="edit-area"
          @blur="saveChanges"
          @focus="startEdit"
        ></textarea>
      </div>
      <div class="badges" v-else>
        {{ user?.achievements || '暂无成就' }}
      </div>
    </div>

    <!-- 社交链接 -->
    <div class="social-links">
      <h3>社交链接</h3>
      <div class="links" v-if="isCurrentUser">
        <div class="link-edit">
          <input
            v-model="editData.github"
            placeholder="GitHub 链接"
            class="edit-input"
            @blur="saveChanges"
            @focus="startEdit"
          >
          <input
            v-model="editData.twitter"
            placeholder="Twitter 链接"
            class="edit-input"
            @blur="saveChanges"
            @focus="startEdit"
          >
          <input
            v-model="editData.website"
            placeholder="个人网站"
            class="edit-input"
            @blur="saveChanges"
            @focus="startEdit"
          >
        </div>
      </div>
      <div class="links" v-else>
        <a v-if="user?.github" :href="user.github" target="_blank" class="link-item">
          <i class="fab fa-github"></i> GitHub
        </a>
        <a v-if="user?.twitter" :href="user.twitter" target="_blank" class="link-item">
          <i class="fab fa-twitter"></i> Twitter
        </a>
        <a v-if="user?.website" :href="user.website" target="_blank" class="link-item">
          <i class="fas fa-globe"></i> 个人网站
        </a>
      </div>
    </div>
  </aside>
</template>

<script setup>
import { ref, computed, watchEffect } from 'vue'
import { useUserStore } from '../stores/userStore'
import { useProfileStore } from '../stores/profileStore'

const props = defineProps({
  user: Object,
})

const userStore = useUserStore()
const profileStore = useProfileStore()
const editData = ref({
  achievements: '',
  github: '',
  twitter: '',
  website: ''
})

const isCurrentUser = computed(() => {
  return userStore.currentUser?.id === props.user?.id
})

// 监听用户数据变化，自动更新编辑数据
watchEffect(() => {
  if (props.user) {
    editData.value = {
      achievements: props.user.achievements || '',
      github: props.user.github || '',
      twitter: props.user.twitter || '',
      website: props.user.website || ''
    }
  }
})

// 开始编辑
const startEdit = () => {
  editData.value = {
    achievements: props.user?.achievements || '',
    github: props.user?.github || '',
    twitter: props.user?.twitter || '',
    website: props.user?.website || ''
  }
}

// 保存更改
const saveChanges = async () => {
  try {
    await profileStore.updateUserExtendedInfo(props.user.id, {
      achievements: editData.value.achievements,
      github: editData.value.github,
      twitter: editData.value.twitter,
      website: editData.value.website
    })
  } catch (error) {
    console.error('保存失败:', error)
  }
}
</script>

<style scoped>
.profile-sidebar > div {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.achievements {
  margin-bottom: 24px;
}

.social-links {
  margin-bottom: 0;
}

.profile-sidebar h3 {
  font-size: 16px;
  margin: 0 0 16px;
  color: var(--text-color);
}

.badges {
  gap: 12px;
  max-height: 240px;
  overflow-y: auto;
}

.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.badge-item img {
  width: 40px;
  height: 40px;
}

.badge-name {
  font-size: 12px;
  color: var(--text-light);
  text-align: center;
}

.links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 240px;
  overflow-y: auto;
}

.link-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-light);
  text-decoration: none;
  font-size: 14px;
}

.link-item:hover {
  color: var(--primary-color);
}

/* 自定义滚动条样式 */
.badges::-webkit-scrollbar,
.links::-webkit-scrollbar {
  width: 4px;
}

.badges::-webkit-scrollbar-track,
.links::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.badges::-webkit-scrollbar-thumb,
.links::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 2px;
}

.edit-area,
.edit-input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  transition: border-color 0.3s;
  font-size: 14px;
  line-height: 1.5;
}

.edit-area {
  min-height: 150px;
  resize: vertical;
}

.edit-input {
  margin-bottom: 12px;
  height: 40px;
}

.link-edit {
  padding: 16px 0;
}

.edit-area:focus,
.edit-input:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}
</style>